<template>
	<view class="page">
		<view class="top">
			<uni-easyinput prefixIcon="search" v-model="keywords" placeholder="搜索商品标题或链接,查优惠返利" @iconClick="goSearch('')"></uni-easyinput>
			<text class="tit" @click="goSearch('')">搜索</text>
		</view>
		<view class="history" v-show="isShow&&historyList.length>0">
			<view class="h_top">
				<view>历史记录</view>
				<view class="h_blue" @click="clearHistory">清空历史记录</view>
			</view>
			<view class="h_list">
				<view class="h_item" v-for="item in historyList" @click="goSearch(item.content)">{{item.content}}</view>
			</view>
		</view>
		<scroll-view class="type" scroll-x="true" v-if="isShowType">
			<view class="t_item" :class="{'t_active':bigcate==2}" @click="changebigCate(2)">抖音</view>
			<view class="t_item" :class="{'t_active':bigcate==1}" @click="changebigCate(1)">拼多多</view>
		</scroll-view>
		<taobaoList :list="goodsList" :type="bigcate" :isloading="isloading" :isempty="isempty"></taobaoList>
	</view>
</template>

<script>
	import taobaoList from "@/components/taobaoList.vue"
	export default {
		components: {
			taobaoList
		},
		data() {
			return {
				isloading: false,
				isempty: false,
				bigcate: 2,
				keywords: '',
				page: 0,
				cateList: [],
				goodsList: [],
				isShow: true,
				isShowType: false,
				historyList: []
			};
		},
		onLoad(option){
			if(option.keywords){
				this.keywords = option.keywords;
				this.isShow = false;
				this.isShowType = true;
				this.getList();
			}
			uni.getClipboardData({
				success: function (res) {
				}
			});
			this.getHistory();
		},
		onReachBottom(){
			this.getList();
		},
		methods: {
			goSearch(val){
				console.log(val)
				if(val){
					this.keywords = val;
				}
				this.page = 0;
				this.goodsList = [];
				this.getList();
			},
			changebigCate(id){
				if(this.bigcate == id) return;
				this.bigcate = id;
				this.page = 0;
				this.goodsList = [];
				this.getList();
			},
			getList(){
				this.isShow = false;
				this.isShowType = true;
				this.isempty = false;
				this.isloading = true;
				this.page++;
				let php = '';
				let obj = {};
				if(this.bigcate==1){
					php = "duoduo";
					obj = {
						page: this.page,
						cid: '',
						keyword: this.keywords
					}
					
				}else if (this.bigcate==2){
					php = "douyin";
					obj = {
						page: this.page,
						cid: 0,
						title: this.keywords
					}
				}
				this.$axios('index/goodsList', 'POST', php, obj).then(res => {
					this.isloading = false;
					if(res.data.code==200){
						this.goodsList = [...this.goodsList, ...res.data.data];
						this.isempty = res.data.data.length <= 0;
					}
				})
			},
			getHistory(){
				let php = '';
				if(this.bigcate==1){
					php = "duoduo";
					
				}else if (this.bigcate==2){
					php = "douyin";
				}
				this.$axios('index/recentlyQuery', 'POST', php).then(res => {
					if(res.data.code==200){
						this.historyList = res.data.data;
					}
				})
			},
			clearHistory(){
				let php = '';
				if(this.bigcate==1){
					php = "duoduo";
					
				}else if (this.bigcate==2){
					php = "douyin";
				}
				this.$axios('index/recentlyDel', 'POST', php).then(res => {
					if(res.data.code==200){
						this.historyList = [];
						this.isShow = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	// padding: 20rpx;
	background: #f4f4f4;
}
.top{
	display: flex;
	align-items: center;
	// margin-top: 20rpx;
	padding: 40rpx 20rpx 0;
	.tit{
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}
}
.history{
	padding: 0 20rpx;
	margin-top: 26rpx;
	.h_top{
		display: flex;
		justify-content: space-between;
		.h_blue{
			color: #4e9ffc;
		}
	}
	.h_list{
		margin-top: 14rpx;
		.h_item{
			border: 1rpx solid #dee1e4;
			padding: 5rpx 16rpx;
			border-radius: 30rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			display: inline-block;
			font-size: 24rpx;
			color: #1f1f1f;
		}
	}
}
.type{
	white-space: nowrap;
	padding: 35rpx 0 25rpx;
	color: #646464;
	.t_item{
		display: inline-block;
		padding: 0 20rpx;
		font-size: 30rpx;
	}
	.t_active{
		color: #141414;
		font-weight: bold;
		font-size: 32rpx;
		position: relative;
		z-index: 1;
		&::after{
			content: ' ';
			width: 50rpx;
			height: 10rpx;
			background: linear-gradient($bg-color,#fff);
			display: block;
			position: absolute;
			z-index: 2;
			left: 50%;
			right: 50%;
			margin-left: -25rpx;
			bottom: 0;
		}
	}
}
</style>
